<template>
  <div>
    <div class="content">
      <My-Title :title="Title"></My-Title>
      <div class="m-list-box">
        <div class="t-tr t-header">
          <div class="t-th w-100">遥测站点</div>
          <div class="t-th w-110">日期</div>
          <div class="t-th w-90">CO(g/km)</div>
          <div class="t-th w-90">Nox(g/km)</div>
          <div class="t-th w-90">HC(g/km)</div>
          <div class="t-th w-90">不透光度</div>
        </div>
        <div class="t-tr t-body" v-for="(item, index) in list" :key="index">
          <div class="t-th w-100">
            <div>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.dwmc"
                placement="top-start"
              >
                <el-button size="mini" style="width: 60px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap">
                  {{ item.dwmc }}
                </el-button>
              </el-tooltip>
            </div>
          </div>
          <div class="t-th w-110">{{ item.jcsj }}</div>
          <div class="t-th w-90">{{ item.cojg }}</div>
          <div class="t-th w-90">{{ item.nojg }}</div>
          <div class="t-th w-90">{{ item.hcjg }}</div>
          <div class="t-th w-90">{{ item.btgdjg }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyTitle from '@/components/MyModal/title'

export default {
  name: 'CarLog',
  components: {
    MyTitle
  },
  data() {
    return {
      Title: '遥感遥测记录'
    }
  },
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  watch: {

  },
  methods: {}
}

</script>

<style scoped lang="scss">

.content {
  position: absolute;
  left: 100px;
  top: 0;
  padding: 25px 20px 20px 40px;
  width: calc(100% - 100px);

  .t-tr {
    width: 100%;
    height: 50px;
    background: #050e2399;
    margin-top: 20px;
    white-space: nowrap;

    &.t-header {
      border: 1px solid;
      border-image: linear-gradient(90deg,
        #00000000 0%,
        #00fff411 25%,
        #00fff455 50%,
        #00fff411 75%,
        #00000000 100%) 1;
      font-size: 14px;
      color: #07c8d1;
    }

    &.t-body {
      font-size: 12px;
      color: #909090;
      cursor: pointer;

      &:hover {
        color: #edf8f9;
        border: 1px solid;
        border-image: linear-gradient(90deg,
          #00000000 0%,
          #00fff411 25%,
          #ffffff55 50%,
          #00fff411 75%,
          #00000000 100%) 1;

        ::v-deep .el-button--mini {
          color: #edf8f9;
        }
      }
    }

    .t-th {
      display: inline-block;
      width: 60px;
      text-align: center;
      white-space: nowrap;
      line-height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;

      &.w-90 {
        width: 90px;
      }

      &.w-100 {
        width: 100px;
      }

      &.w-110 {
        width: 112px;
      }

      ::v-deep .el-button--mini {
        width: 60px;
        background: transparent;
        border: none;
        padding: 0;
        color: #909090;
        font-size: 12px;

        &:hover {
          color: #edf8f9;
        }
      }
    }
  }
}
</style>
